<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回调函数形式的ref</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>


<!--引入react核心库-->
<script type="text/javascript" src="../Js/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../Js/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../Js/babel.min.js"></script>
<!--引入prop-types库,用于将对props进行类型限制-->
<script type="text/javascript" src="../Js/prop-types.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js


class Demo extends React.Component{

    showData=()=>{
        const {input1}=this
        alert(input1.value)
    }
    showInfo=()=>{
        const {input2}=this
        alert(input2.value)
    }

    render(){
        return(
            <div>
                <input   ref={node=>this.input1=node} type="text" placeholder="输入后点击按钮提示"/>&nbsp;&nbsp;&nbsp;&nbsp;
                <button onClick={this.showData}>点我</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <input ref={node=>this.input2=node} type="text" placeholder="输入离开后提示" onBlur={this.showInfo}/>&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
        )
    }
}

ReactDOM.render(<Demo/>,document.getElementById("container"))

</script>